<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Theme Assets  Reference</title>
    <link rel="stylesheet" type="text/css" href="css/jazzy.css" />
    <link rel="stylesheet" type="text/css" href="css/highlight.css" />
    <meta charset='utf-8'>
    <script src="js/jquery.min.js" defer></script>
    <script src="js/jazzy.js" defer></script>
    
    <script src="js/lunr.min.js" defer></script>
    <script src="js/typeahead.jquery.js" defer></script>
    <script src="js/jazzy.search.js" defer></script>
  </head>
  <body>
    <a name="//apple_ref/swift/Section/Theme Assets" class="dashAnchor"></a>
    <a title="Theme Assets  Reference"></a>
    <header>
      <div class="content-wrapper">
        <p><a href="index.html">ThemeKit 1.4.0 Docs</a></p>
        <p class="header-right"><a href="https://github.com/luckymarmot/ThemeKit"><img src="img/gh.png"/>View on GitHub</a></p>
        <p class="header-right"><a href="dash-feed://http%3A%2F%2Fthemekit.nunogrilo.com%2Fdocsets%2FThemeKit.xml"><img src="img/dash.png"/>Install in Dash</a></p>
        <p class="header-right">
          <form role="search" action="search.json">
            <input type="text" placeholder="Search documentation" data-typeahead>
          </form>
        </p>
      </div>
    </header>
    <div class="content-wrapper">
      <p id="breadcrumbs">
        <a href="index.html">ThemeKit Reference</a>
        <img id="carat" src="img/carat.png" />
        Theme Assets  Reference
      </p>
    </div>
    <div class="content-wrapper">
      <nav class="sidebar">
        <ul class="nav-groups">
          <li class="nav-group-name">
            <a href="ThemeKit.html">ThemeKit</a>
            <ul class="nav-group-tasks">
              <li class="nav-group-task">
                <a href="Classes/ThemeManager.html">ThemeManager</a>
              </li>
              <li class="nav-group-task">
                <a href="Classes/ThemeManager/WindowThemePolicy.html">– WindowThemePolicy</a>
              </li>
              <li class="nav-group-task">
                <a href="Extensions/Notification.html">Notification</a>
              </li>
              <li class="nav-group-task">
                <a href="Extensions/Notification/Name.html">– Name</a>
              </li>
            </ul>
          </li>
          <li class="nav-group-name">
            <a href="Themes.html">Themes</a>
            <ul class="nav-group-tasks">
              <li class="nav-group-task">
                <a href="Protocols/Theme.html">Theme</a>
              </li>
              <li class="nav-group-task">
                <a href="Classes/LightTheme.html">LightTheme</a>
              </li>
              <li class="nav-group-task">
                <a href="Classes/DarkTheme.html">DarkTheme</a>
              </li>
              <li class="nav-group-task">
                <a href="Classes/SystemTheme.html">SystemTheme</a>
              </li>
              <li class="nav-group-task">
                <a href="Classes/UserTheme.html">UserTheme</a>
              </li>
            </ul>
          </li>
          <li class="nav-group-name">
            <a href="Theme%20Assets.html">Theme Assets</a>
            <ul class="nav-group-tasks">
              <li class="nav-group-task">
                <a href="Classes/ThemeColor.html">ThemeColor</a>
              </li>
              <li class="nav-group-task">
                <a href="Classes/ThemeGradient.html">ThemeGradient</a>
              </li>
              <li class="nav-group-task">
                <a href="Classes/ThemeImage.html">ThemeImage</a>
              </li>
            </ul>
          </li>
          <li class="nav-group-name">
            <a href="Extensions.html">Extensions</a>
            <ul class="nav-group-tasks">
              <li class="nav-group-task">
                <a href="Extensions/NSWindow.html">NSWindow</a>
              </li>
              <li class="nav-group-task">
                <a href="Extensions/NSColor.html">NSColor</a>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
      <article class="main-content">
        <section>
          <section class="section">
            <h1>Theme Assets</h1>
            
          </section>
          <section class="section task-group-section">
            <div class="task-group">
              <ul>
                <li class="item">
                  <div>
                    <code>
                    <a name="/c:@M@ThemeKit@objc(cs)TKThemeColor"></a>
                    <a name="//apple_ref/swift/Class/ThemeColor" class="dashAnchor"></a>
                    <a class="token" href="#/c:@M@ThemeKit@objc(cs)TKThemeColor">ThemeColor</a>
                    </code>
                  </div>
                  <div class="height-container">
                    <div class="pointer-container"></div>
                    <section class="section">
                      <div class="pointer"></div>
                      <div class="abstract">
                        <p><code>ThemeColor</code> is a <code>NSColor</code> subclass that dynamically changes its colors whenever
a new theme is make current.</p>

<p>Theme-aware means you don&rsquo;t need to check any conditions when choosing which 
color to draw or set on a control. E.g.:</p>
<pre class="highlight swift"><code><span class="n">myTextField</span><span class="o">.</span><span class="n">textColor</span> <span class="o">=</span> <span class="kt">ThemeColor</span><span class="o">.</span><span class="n">myContentTextColor</span>

<span class="kt">ThemeColor</span><span class="o">.</span><span class="n">myCircleFillColor</span><span class="o">.</span><span class="nf">setFill</span><span class="p">()</span>
<span class="kt">NSBezierPath</span><span class="p">(</span><span class="nv">rect</span><span class="p">:</span> <span class="n">bounds</span><span class="p">)</span><span class="o">.</span><span class="nf">fill</span><span class="p">()</span>
</code></pre>

<p>The text color of <code>myTextField</code> will automatically change when the user switches
a theme. Similarly, the drawing code will draw with different color depending on
the selected theme. Unless some drawing cache is being done, there&rsquo;s no need to 
refresh the UI after changing the current theme.</p>

<p>You can also define a color to be a pattern image using <code>NSColor(patternImage:)</code>.</p>
<h2 id='defining-theme-aware-colors' class='heading'>Defining theme-aware colors</h2>

<p>The recommended way of adding your own dynamic colors is as follows:</p>

<ol>
<li><p><strong>Add a <code>ThemeColor</code> class extension</strong> (or <code>TKThemeColor</code> category on Objective-C)
to add class methods for your colors. E.g.:</p>

<p>In Swift:</p>
<pre class="highlight swift"><code><span class="kd">extension</span> <span class="kt">ThemeColor</span> <span class="p">{</span>

  <span class="kd">static</span> <span class="k">var</span> <span class="nv">brandColor</span><span class="p">:</span> <span class="kt">ThemeColor</span> <span class="p">{</span> 
    <span class="k">return</span> <span class="kt">ThemeColor</span><span class="o">.</span><span class="nf">color</span><span class="p">(</span><span class="nv">with</span><span class="p">:</span> <span class="kd">#function</span><span class="p">)</span>
  <span class="p">}</span>

<span class="p">}</span>
</code></pre>

<p>In Objective-C:</p>
<pre class="highlight objective_c"><code><span class="k">@interface</span> <span class="nc">TKThemeColor</span> <span class="p">(</span><span class="nl">Demo</span><span class="p">)</span>

<span class="k">+</span> <span class="p">(</span><span class="n">TKThemeColor</span><span class="o">*</span><span class="p">)</span><span class="n">brandColor</span><span class="p">;</span>

<span class="k">@end</span>

<span class="k">@implementation</span> <span class="nc">TKThemeColor</span> <span class="p">(</span><span class="nl">Demo</span><span class="p">)</span>

<span class="k">+</span> <span class="p">(</span><span class="n">TKThemeColor</span><span class="o">*</span><span class="p">)</span><span class="n">brandColor</span> <span class="p">{</span>
  <span class="k">return</span> <span class="p">[</span><span class="n">TKThemeColor</span> <span class="nf">colorWithSelector</span><span class="p">:</span><span class="n">_cmd</span><span class="p">];</span>
<span class="p">}</span>

<span class="k">@end</span>
</code></pre></li>
<li><p><strong>Add Class Extensions on any <code><a href="Protocols/Theme.html">Theme</a></code> you want to support</strong> (e.g., <code><a href="Classes/LightTheme.html">LightTheme</a></code>
and <code><a href="Classes/DarkTheme.html">DarkTheme</a></code> - <code>TKLightTheme</code> and <code>TKDarkTheme</code> on Objective-C) to provide
instance methods for each theme color class method defined on (1). E.g.:</p>

<p>In Swift:</p>
<pre class="highlight swift"><code><span class="kd">extension</span> <span class="kt">LightTheme</span> <span class="p">{</span>

  <span class="k">var</span> <span class="nv">brandColor</span><span class="p">:</span> <span class="kt">NSColor</span> <span class="p">{</span>
    <span class="k">return</span> <span class="kt">NSColor</span><span class="o">.</span><span class="n">orange</span>
  <span class="p">}</span>

<span class="p">}</span>

<span class="kd">extension</span> <span class="kt">DarkTheme</span> <span class="p">{</span>

  <span class="k">var</span> <span class="nv">brandColor</span><span class="p">:</span> <span class="kt">NSColor</span> <span class="p">{</span>
    <span class="k">return</span> <span class="kt">NSColor</span><span class="o">.</span><span class="n">white</span>
  <span class="p">}</span>

<span class="p">}</span>
</code></pre>

<p>In Objective-C:</p>
<pre class="highlight objective_c"><code><span class="k">@interface</span> <span class="nc">TKLightTheme</span> <span class="p">(</span><span class="nl">Demo</span><span class="p">)</span> <span class="k">@end</span>

<span class="k">@implementation</span> <span class="nc">TKLightTheme</span> <span class="p">(</span><span class="nl">Demo</span><span class="p">)</span>

   <span class="k">-</span> <span class="p">(</span><span class="n">NSColor</span><span class="o">*</span><span class="p">)</span><span class="n">brandColor</span>
   <span class="p">{</span>
       <span class="k">return</span> <span class="p">[</span><span class="n">NSColor</span> <span class="nf">orangeColor</span><span class="p">];</span>
   <span class="p">}</span>

<span class="k">@end</span>

<span class="k">@interface</span> <span class="nc">TKDarkTheme</span> <span class="p">(</span><span class="nl">Demo</span><span class="p">)</span> <span class="k">@end</span>

<span class="k">@implementation</span> <span class="nc">TKDarkTheme</span> <span class="p">(</span><span class="nl">Demo</span><span class="p">)</span>

   <span class="k">-</span> <span class="p">(</span><span class="n">NSColor</span><span class="o">*</span><span class="p">)</span><span class="n">brandColor</span>
   <span class="p">{</span>
       <span class="k">return</span> <span class="p">[</span><span class="n">NSColor</span> <span class="nf">whiteColor</span><span class="p">];</span>
   <span class="p">}</span>

<span class="k">@end</span>
</code></pre></li>
<li><p>If supporting <code><a href="Classes/UserTheme.html">UserTheme</a></code>&lsquo;s, <strong>define properties on user theme files</strong> (<code>.theme</code>)
for each theme color class method defined on (1). E.g.:</p>
<pre class="highlight swift"><code><span class="n">displayName</span> <span class="o">=</span> <span class="kt">Sample</span> <span class="kt">User</span> <span class="kt">Theme</span>
<span class="n">identifier</span> <span class="o">=</span> <span class="n">com</span><span class="o">.</span><span class="n">luckymarmot</span><span class="o">.</span><span class="kt">ThemeKit</span><span class="o">.</span><span class="kt">SampleUserTheme</span>
<span class="n">darkTheme</span> <span class="o">=</span> <span class="kc">false</span>

<span class="n">brandColor</span> <span class="o">=</span> <span class="nf">rgba</span><span class="p">(</span><span class="mi">96</span><span class="p">,</span> <span class="mi">240</span><span class="p">,</span> <span class="mi">12</span><span class="p">,</span> <span class="mf">0.5</span><span class="p">)</span>
</code></pre></li>
</ol>
<h2 id='overriding-system-colors' class='heading'>Overriding system colors</h2>

<p>Besides your own colors added as <code>ThemeColor</code> class methods, you can also override 
<code>NSColor</code> class methods so that they return theme-aware colors. The procedure is
exactly the same, so, for example, if adding a method named <code>labelColor</code> to a 
<code>ThemeColor</code> extension, that method will be overriden in <code>NSColor</code> and the colors
from <code><a href="Protocols/Theme.html">Theme</a></code> subclasses will be used instead. 
In sum, calling <code>NSColor.labelColor</code> will return theme-aware colors.</p>

<p>You can get the full list of available/overridable color methods (class methods)
calling <code><a href="Extensions/NSColor.html#/c:@CM@ThemeKit@@objc(cs)NSColor(cm)colorMethodNames">NSColor.colorMethodNames()</a></code>.</p>

<p>At any time, you can check if a system color is being overriden by current theme
by checking the <code><a href="Extensions/NSColor.html#/c:@CM@ThemeKit@@objc(cs)NSColor(py)isThemeOverriden">NSColor.isThemeOverriden</a></code> property (e.g., <code>NSColor.labelColor.isThemeOverriden</code>).</p>

<p>When a theme does not override a system color, the original system color will be
used instead. E.g., you have overrided <code>ThemeColor.labelColor</code>, but currently 
applied theme does not implement <code>labelColor</code> -&gt; original <code>labelColor</code> will be
used.</p>
<h2 id='fallback-colors' class='heading'>Fallback colors</h2>

<p>With the exception of system overrided named colors, which defaults to the original
system provided named color when theme does not specifies it, unimplemented
properties/methods on target theme class will default to <code>fallbackForegroundColor</code>
and <code>fallbackBackgroundColor</code>, for foreground and background colors respectively.
These too, can be customized per theme.</p>

<p>Please check <code><a href="Classes/ThemeGradient.html">ThemeGradient</a></code> for theme-aware gradients and <code><a href="Classes/ThemeImage.html">ThemeImage</a></code> for theme-aware images.</p>

                        <a href="Classes/ThemeColor.html" class="slightly-smaller">See more</a>
                      </div>
                      <div class="declaration">
                        <h4>Declaration</h4>
                        <div class="language">
                          <p class="aside-title">Swift</p>
                          <pre class="highlight swift"><code><span class="kd">@objc</span><span class="p">(</span><span class="kt">TKThemeColor</span><span class="p">)</span>
<span class="kd">open</span> <span class="kd">class</span> <span class="kt">ThemeColor</span> <span class="p">:</span> <span class="kt">NSColor</span></code></pre>

                        </div>
                      </div>
                      <div class="slightly-smaller">
                        <a href="https://github.com/luckymarmot/ThemeKit/blob/master/Sources/ThemeColor.swift#L164-L595">Show on GitHub</a>
                      </div>
                    </section>
                  </div>
                </li>
                <li class="item">
                  <div>
                    <code>
                    <a name="/c:@M@ThemeKit@objc(cs)TKThemeGradient"></a>
                    <a name="//apple_ref/swift/Class/ThemeGradient" class="dashAnchor"></a>
                    <a class="token" href="#/c:@M@ThemeKit@objc(cs)TKThemeGradient">ThemeGradient</a>
                    </code>
                  </div>
                  <div class="height-container">
                    <div class="pointer-container"></div>
                    <section class="section">
                      <div class="pointer"></div>
                      <div class="abstract">
                        <p><code>ThemeGradient</code> is a <code>NSGradient</code> subclass that dynamically changes its colors 
whenever a new theme is make current.</p>

<p>Theme-aware means you don&rsquo;t need to check any conditions when choosing which
gradient to draw. E.g.:</p>
<pre class="highlight swift"><code><span class="kt">ThemeGradient</span><span class="o">.</span><span class="n">rainbowGradient</span><span class="o">.</span><span class="nf">draw</span><span class="p">(</span><span class="nv">in</span><span class="p">:</span> <span class="n">bounds</span><span class="p">,</span> <span class="nv">angle</span><span class="p">:</span> <span class="mi">0</span><span class="p">)</span>
</code></pre>

<p>The drawing code will draw with different gradient depending on the selected 
theme. Unless some drawing cache is being done, there&rsquo;s no need to refresh the
UI after changing the current theme.</p>
<h2 id='defining-theme-aware-gradients' class='heading'>Defining theme-aware gradients</h2>

<p>The recommended way of adding your own dynamic gradients is as follows:</p>

<ol>
<li><p><strong>Add a <code>ThemeGradient</code> class extension</strong> (or <code>TKThemeGradient</code> category on
Objective-C) to add class methods for your gradients. E.g.:</p>

<p>In Swift:</p>
<pre class="highlight swift"><code><span class="kd">extension</span> <span class="kt">ThemeGradient</span> <span class="p">{</span>

    <span class="kd">static</span> <span class="k">var</span> <span class="nv">brandGradient</span><span class="p">:</span> <span class="kt">ThemeGradient</span> <span class="p">{</span>
       <span class="k">return</span> <span class="kt">ThemeGradient</span><span class="o">.</span><span class="nf">gradient</span><span class="p">(</span><span class="nv">with</span><span class="p">:</span> <span class="kd">#function</span><span class="p">)</span>
    <span class="p">}</span>

<span class="p">}</span>
</code></pre>

<p>In Objective-C:</p>
<pre class="highlight swift"><code><span class="kd">@interface</span> <span class="kt">TKThemeGradient</span> <span class="p">(</span><span class="kt">Demo</span><span class="p">)</span>

<span class="o">+</span> <span class="p">(</span><span class="kt">TKThemeGradient</span><span class="o">*</span><span class="p">)</span><span class="n">brandGradient</span><span class="p">;</span>

<span class="kd">@end</span>

<span class="kd">@implementation</span> <span class="kt">TKThemeGradient</span> <span class="p">(</span><span class="kt">Demo</span><span class="p">)</span>

<span class="o">+</span> <span class="p">(</span><span class="kt">TKThemeGradient</span><span class="o">*</span><span class="p">)</span><span class="n">brandGradient</span> <span class="p">{</span>
   <span class="k">return</span> <span class="p">[</span><span class="kt">TKThemeGradient</span> <span class="nv">gradientWithSelector</span><span class="p">:</span><span class="n">_cmd</span><span class="p">];</span>
<span class="p">}</span>

<span class="kd">@end</span>
</code></pre></li>
<li><p><strong>Add Class Extensions on any <code><a href="Protocols/Theme.html">Theme</a></code> you want to support</strong> (e.g., <code><a href="Classes/LightTheme.html">LightTheme</a></code>
and <code><a href="Classes/DarkTheme.html">DarkTheme</a></code> - <code>TKLightTheme</code> and <code>TKDarkTheme</code> on Objective-C) to provide
instance methods for each theme gradient class method defined on (1). E.g.:</p>

<p>In Swift:</p>
<pre class="highlight swift"><code><span class="kd">extension</span> <span class="kt">LightTheme</span> <span class="p">{</span>

    <span class="k">var</span> <span class="nv">brandGradient</span><span class="p">:</span> <span class="kt">NSGradient</span> <span class="p">{</span>
       <span class="k">return</span> <span class="kt">NSGradient</span><span class="p">(</span><span class="nv">starting</span><span class="p">:</span> <span class="kt">NSColor</span><span class="o">.</span><span class="n">white</span><span class="p">,</span> <span class="nv">ending</span><span class="p">:</span> <span class="kt">NSColor</span><span class="o">.</span><span class="n">black</span><span class="p">)</span>
    <span class="p">}</span>

    <span class="p">}</span>

    <span class="kd">extension</span> <span class="kt">DarkTheme</span> <span class="p">{</span>

    <span class="k">var</span> <span class="nv">brandGradient</span><span class="p">:</span> <span class="kt">NSGradient</span> <span class="p">{</span>
       <span class="k">return</span> <span class="kt">NSGradient</span><span class="p">(</span><span class="nv">starting</span><span class="p">:</span> <span class="kt">NSColor</span><span class="o">.</span><span class="n">black</span><span class="p">,</span> <span class="nv">ending</span><span class="p">:</span> <span class="kt">NSColor</span><span class="o">.</span><span class="n">white</span><span class="p">)</span>
    <span class="p">}</span>

<span class="p">}</span>
</code></pre>

<p>In Objective-C:</p>
<pre class="highlight swift"><code><span class="kd">@interface</span> <span class="kt">TKLightTheme</span> <span class="p">(</span><span class="kt">Demo</span><span class="p">)</span> <span class="kd">@end</span>

<span class="kd">@implementation</span> <span class="kt">TKLightTheme</span> <span class="p">(</span><span class="kt">Demo</span><span class="p">)</span>

<span class="o">-</span> <span class="p">(</span><span class="kt">NSGradient</span><span class="o">*</span><span class="p">)</span><span class="n">brandGradient</span>
<span class="p">{</span>
   <span class="k">return</span> <span class="p">[[</span><span class="kt">NSGradient</span> <span class="n">alloc</span><span class="p">]</span> <span class="nv">initWithStartingColor</span><span class="p">:[</span><span class="kt">NSColor</span> <span class="n">whiteColor</span><span class="p">]</span> <span class="nv">endingColor</span><span class="p">:[</span><span class="kt">NSColor</span> <span class="n">blackColor</span><span class="p">]];</span>
<span class="p">}</span>

<span class="kd">@end</span>

<span class="kd">@interface</span> <span class="kt">TKDarkTheme</span> <span class="p">(</span><span class="kt">Demo</span><span class="p">)</span> <span class="kd">@end</span>

<span class="kd">@implementation</span> <span class="kt">TKDarkTheme</span> <span class="p">(</span><span class="kt">Demo</span><span class="p">)</span>

<span class="o">-</span> <span class="p">(</span><span class="kt">NSGradient</span><span class="o">*</span><span class="p">)</span><span class="n">brandGradient</span>
<span class="p">{</span>
   <span class="k">return</span> <span class="p">[[</span><span class="kt">NSGradient</span> <span class="n">alloc</span><span class="p">]</span> <span class="nv">initWithStartingColor</span><span class="p">:[</span><span class="kt">NSColor</span> <span class="n">blackColor</span><span class="p">]</span> <span class="nv">endingColor</span><span class="p">:[</span><span class="kt">NSColor</span> <span class="n">whiteColor</span><span class="p">]];</span>
<span class="p">}</span>

<span class="kd">@end</span>
</code></pre></li>
<li><p>If supporting <code><a href="Classes/UserTheme.html">UserTheme</a></code>&lsquo;s, <strong>define properties on user theme files</strong> (<code>.theme</code>)
for each theme gradient class method defined on (1). E.g.:</p>
<pre class="highlight swift"><code><span class="n">displayName</span> <span class="o">=</span> <span class="kt">Sample</span> <span class="kt">User</span> <span class="kt">Theme</span>
<span class="n">identifier</span> <span class="o">=</span> <span class="n">com</span><span class="o">.</span><span class="n">luckymarmot</span><span class="o">.</span><span class="kt">ThemeKit</span><span class="o">.</span><span class="kt">SampleUserTheme</span>
<span class="n">darkTheme</span> <span class="o">=</span> <span class="kc">false</span>

<span class="n">orangeSky</span> <span class="o">=</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">160</span><span class="p">,</span> <span class="mi">90</span><span class="p">,</span> <span class="mi">45</span><span class="p">,</span> <span class="o">.</span><span class="mi">5</span><span class="p">)</span>
<span class="n">brandGradient</span> <span class="o">=</span> <span class="n">linear</span><span class="o">-</span><span class="nf">gradient</span><span class="p">(</span><span class="err">$</span><span class="n">orangeSky</span><span class="p">,</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">200</span><span class="p">,</span> <span class="mi">140</span><span class="p">,</span> <span class="mi">60</span><span class="p">))</span>
</code></pre></li>
</ol>
<h2 id='fallback-colors' class='heading'>Fallback colors</h2>

<p>Unimplemented properties/methods on target theme class will default to
<code>fallbackGradient</code>. This too, can be customized per theme.</p>

<p>Please check <code><a href="Classes/ThemeColor.html">ThemeColor</a></code> for theme-aware colors and <code><a href="Classes/ThemeImage.html">ThemeImage</a></code> for theme-aware images.</p>

                        <a href="Classes/ThemeGradient.html" class="slightly-smaller">See more</a>
                      </div>
                      <div class="declaration">
                        <h4>Declaration</h4>
                        <div class="language">
                          <p class="aside-title">Swift</p>
                          <pre class="highlight swift"><code><span class="kd">@objc</span><span class="p">(</span><span class="kt">TKThemeGradient</span><span class="p">)</span>
<span class="kd">open</span> <span class="kd">class</span> <span class="kt">ThemeGradient</span> <span class="p">:</span> <span class="kt">NSGradient</span></code></pre>

                        </div>
                      </div>
                      <div class="slightly-smaller">
                        <a href="https://github.com/luckymarmot/ThemeKit/blob/master/Sources/ThemeGradient.swift#L137-L356">Show on GitHub</a>
                      </div>
                    </section>
                  </div>
                </li>
                <li class="item">
                  <div>
                    <code>
                    <a name="/c:@M@ThemeKit@objc(cs)TKThemeImage"></a>
                    <a name="//apple_ref/swift/Class/ThemeImage" class="dashAnchor"></a>
                    <a class="token" href="#/c:@M@ThemeKit@objc(cs)TKThemeImage">ThemeImage</a>
                    </code>
                  </div>
                  <div class="height-container">
                    <div class="pointer-container"></div>
                    <section class="section">
                      <div class="pointer"></div>
                      <div class="abstract">
                        <p><code>ThemeImage</code> is a <code>NSImage</code> subclass that dynamically changes its colors
whenever a new theme is make current.</p>

<p>Theme-aware means you don&rsquo;t need to check any conditions when choosing which
image to draw. E.g.:</p>
<pre class="highlight swift"><code><span class="kt">ThemeImage</span><span class="o">.</span><span class="n">logoImage</span><span class="o">.</span><span class="nf">draw</span><span class="p">(</span><span class="nv">in</span><span class="p">:</span> <span class="n">bounds</span><span class="p">)</span>
</code></pre>

<p>The drawing code will draw with different image depending on the selected
theme. Unless some drawing cache is being done, there&rsquo;s no need to refresh the
UI after changing the current theme.</p>
<h2 id='defining-theme-aware-images' class='heading'>Defining theme-aware images</h2>

<p>The recommended way of adding your own dynamic images is as follows:</p>

<ol>
<li><p><strong>Add a <code>ThemeImage</code> class extension</strong> (or <code>TKThemeImage</code> category on
Objective-C) to add class methods for your images. E.g.:</p>

<p>In Swift:</p>
<pre class="highlight swift"><code><span class="kd">extension</span> <span class="kt">ThemeImage</span> <span class="p">{</span>

    <span class="kd">static</span> <span class="k">var</span> <span class="nv">logoImage</span><span class="p">:</span> <span class="kt">ThemeImage</span> <span class="p">{</span>
        <span class="k">return</span> <span class="kt">ThemeImage</span><span class="o">.</span><span class="nf">image</span><span class="p">(</span><span class="nv">with</span><span class="p">:</span> <span class="kd">#function</span><span class="p">)</span>
    <span class="p">}</span>

<span class="p">}</span>
</code></pre>

<p>In Objective-C:</p>
<pre class="highlight swift"><code><span class="kd">@interface</span> <span class="kt">TKThemeImage</span> <span class="p">(</span><span class="kt">Demo</span><span class="p">)</span>

<span class="o">+</span> <span class="p">(</span><span class="kt">TKThemeImage</span><span class="o">*</span><span class="p">)</span><span class="n">logoImage</span><span class="p">;</span>

<span class="kd">@end</span>

<span class="kd">@implementation</span> <span class="kt">TKThemeImage</span> <span class="p">(</span><span class="kt">Demo</span><span class="p">)</span>

<span class="o">+</span> <span class="p">(</span><span class="kt">TKThemeImage</span><span class="o">*</span><span class="p">)</span><span class="n">logoImage</span> <span class="p">{</span>
    <span class="k">return</span> <span class="p">[</span><span class="kt">TKThemeImage</span> <span class="nv">imageWithSelector</span><span class="p">:</span><span class="n">_cmd</span><span class="p">];</span>
<span class="p">}</span>

<span class="kd">@end</span>
</code></pre></li>
<li><p><strong>Add Class Extensions on any <code><a href="Protocols/Theme.html">Theme</a></code> you want to support</strong> (e.g., <code><a href="Classes/LightTheme.html">LightTheme</a></code>
and <code><a href="Classes/DarkTheme.html">DarkTheme</a></code> - <code>TKLightTheme</code> and <code>TKDarkTheme</code> on Objective-C) to provide 
instance methods for each theme image class method defined on (1). E.g.:</p>

<p>In Swift:</p>
<pre class="highlight swift"><code><span class="kd">extension</span> <span class="kt">LightTheme</span> <span class="p">{</span>

    <span class="k">var</span> <span class="nv">logoImage</span><span class="p">:</span> <span class="kt">NSImage</span><span class="p">?</span> <span class="p">{</span>
        <span class="k">return</span> <span class="kt">NSImage</span><span class="p">(</span><span class="nv">named</span><span class="p">:</span> <span class="s">"MyLightLogo"</span><span class="p">)</span>
    <span class="p">}</span>

<span class="p">}</span>

<span class="kd">extension</span> <span class="kt">DarkTheme</span> <span class="p">{</span>

    <span class="k">var</span> <span class="nv">logoImage</span><span class="p">:</span> <span class="kt">NSImage</span><span class="p">?</span> <span class="p">{</span>
        <span class="k">return</span> <span class="kt">NSImage</span><span class="p">(</span><span class="nv">contentsOfFile</span><span class="p">:</span> <span class="s">"somewhere/MyDarkLogo.png"</span><span class="p">)</span>
    <span class="p">}</span>

<span class="p">}</span>
</code></pre>

<p>In Objective-C:</p>
<pre class="highlight swift"><code><span class="kd">@interface</span> <span class="kt">TKLightTheme</span> <span class="p">(</span><span class="kt">Demo</span><span class="p">)</span> <span class="kd">@end</span>

<span class="kd">@implementation</span> <span class="kt">TKLightTheme</span> <span class="p">(</span><span class="kt">Demo</span><span class="p">)</span>

<span class="o">-</span> <span class="p">(</span><span class="kt">NSImage</span><span class="o">*</span><span class="p">)</span><span class="n">logoImage</span>
<span class="p">{</span>
    <span class="k">return</span> <span class="p">[</span><span class="kt">NSImage</span> <span class="nv">imageNamed</span><span class="p">:</span><span class="s">@"MyLightLogo"</span><span class="p">];</span>
<span class="p">}</span>

<span class="kd">@end</span>

<span class="kd">@interface</span> <span class="kt">TKDarkTheme</span> <span class="p">(</span><span class="kt">Demo</span><span class="p">)</span> <span class="kd">@end</span>

<span class="kd">@implementation</span> <span class="kt">TKDarkTheme</span> <span class="p">(</span><span class="kt">Demo</span><span class="p">)</span>

<span class="o">-</span> <span class="p">(</span><span class="kt">NSImage</span><span class="o">*</span><span class="p">)</span><span class="n">logoImage</span>
<span class="p">{</span>
    <span class="k">return</span> <span class="p">[</span><span class="kt">NSImage</span> <span class="n">alloc</span><span class="p">]</span> <span class="nv">initWithContentsOfFile</span><span class="p">:</span><span class="s">@"somewhere/MyDarkLogo.png"</span><span class="p">];</span>
<span class="p">}</span>

<span class="kd">@end</span>
</code></pre></li>
<li><p>If supporting <code><a href="Classes/UserTheme.html">UserTheme</a></code>&lsquo;s, <strong>define properties on user theme files</strong> (<code>.theme</code>)
for each theme image class method defined on (1). E.g.:</p>
<pre class="highlight swift"><code><span class="n">displayName</span> <span class="o">=</span> <span class="kt">Sample</span> <span class="kt">User</span> <span class="kt">Theme</span>
<span class="n">identifier</span> <span class="o">=</span> <span class="n">com</span><span class="o">.</span><span class="n">luckymarmot</span><span class="o">.</span><span class="kt">ThemeKit</span><span class="o">.</span><span class="kt">SampleUserTheme</span>
<span class="n">darkTheme</span> <span class="o">=</span> <span class="kc">false</span>

<span class="n">logoImage</span> <span class="o">=</span> <span class="nf">image</span><span class="p">(</span><span class="nv">named</span><span class="p">:</span><span class="kt">MyLogo</span><span class="p">)</span>
<span class="c1">//logoImage = image(file:../some/path/MyLogo.png)</span>
</code></pre></li>
</ol>
<h2 id='fallback-images' class='heading'>Fallback images</h2>

<p>Unimplemented properties/methods on target theme class will default to
<code>fallbackImage</code>. This too, can be customized per theme.</p>

<p>Please check <code><a href="Classes/ThemeColor.html">ThemeColor</a></code> for theme-aware colors and <code><a href="Classes/ThemeGradient.html">ThemeGradient</a></code> for theme-aware gradients.</p>

                        <a href="Classes/ThemeImage.html" class="slightly-smaller">See more</a>
                      </div>
                      <div class="declaration">
                        <h4>Declaration</h4>
                        <div class="language">
                          <p class="aside-title">Swift</p>
                          <pre class="highlight swift"><code><span class="kd">@objc</span><span class="p">(</span><span class="kt">TKThemeImage</span><span class="p">)</span>
<span class="kd">open</span> <span class="kd">class</span> <span class="kt">ThemeImage</span> <span class="p">:</span> <span class="kt">NSImage</span></code></pre>

                        </div>
                      </div>
                      <div class="slightly-smaller">
                        <a href="https://github.com/luckymarmot/ThemeKit/blob/master/Sources/ThemeImage.swift#L137-L527">Show on GitHub</a>
                      </div>
                    </section>
                  </div>
                </li>
              </ul>
            </div>
          </section>
        </section>
        <section id="footer">
          <p>© 2016-2017 <a class="link" href="https://paw.cloud" target="_blank" rel="external">Paw</a> &amp; <a class="link" href="http://nunogrilo.com" target="_blank" rel="external">Nuno Grilo</a> under <a class="link" href="https://github.com/luckymarmot/ThemeKit/blob/master/LICENSE" target="_blank" rel="external">MIT License</a>.</p>
          <p>Generated by <a class="link" href="https://github.com/realm/jazzy" target="_blank" rel="external">jazzy ♪♫ v0.13.7</a>, a <a class="link" href="https://realm.io" target="_blank" rel="external">Realm</a> project.</p>
        </section>
      </article>
    </div>
  </body>
</div>
</html>
